Két fontos dolgot kell tudnia: a festési sorrend és az egymásra helyezés összefüggései. Ha hivatkozik a specifikációra, megtudhatja, hogyan és mikor festenek elemeket.
Negatív z-indexű (0-t kizáró) pozicionált leszármazottak által kialakított összefüggések egymásra rakása z-index sorrendben (először a legnegatívabb), majd a fák sorrendje.
Minden pozicionált, átlátszatlanságot vagy transzformációs utódot farendben, amely a következő kategóriákba tartozik:
Minden pozícionált leszármazott, "z-index: auto" vagy "z-index: 0", fasorrendben.
1-nél nagyobb vagy azzal egyenlő z indexű pozicionált leszármazottak által kialakított összefüggések egymásra rakása z-index sorrendben (először a legkisebb), majd a fák sorrendje.
Ebből egyértelmű, hogy először negatív z-indexű elemeket festünk a (3) lépésben, majd azokat, amelyek z-indexe egyenlő 0-val a (8) lépésben, végül azokat, amelyek pozitív z-indexűek a (9) lépésben , ami logikus. A specifikáció egy másik részében is olvashatunk:
Minden doboz egy halmozási környezethez tartozik. Egy adott veremkörnyezet minden egyes dobozának van egy egész veremszintje, amely a z tengelyen az ugyanazon az egymásra helyezési kontextus többi mezőjéhez viszonyított pozíciója. A nagyobb veremszintű dobozokat mindig az alacsonyabb veremszintű dobozok előtt formázzák. A dobozok veremszintje negatív lehet. A veremkörnyezetben azonos veremszintű dobozok alulról felfelé halmozódnak a dokumentumfa sorrendje szerint.
Is
A helyi veremkörnyezetet létrehozó elem egy olyan dobozt generál, amelynek két veremszintje van: az egyik az általa létrehozott halmozási környezethez (mindig 0), a másik pedig a veremkörnyezethez, amelyhez tartozik (a z-index tulajdonság adja).
Annak megértéséhez, hogy az egyes elemek mikor kerülnek festésre, ismernie kell annak egymásra helyezésének kontextusát és a verem szintjét ebben a halmozási környezetben (amelyet z-index határoz meg). Azt is tudni kell, hogy az elem létrehoz-e egymásra helyezési kontextust. Ez a trükkös rész, mert a z-index beállítása ezt teszi:
Pozicionált doboz esetén a z-index tulajdonság a következőket határozza meg:
A doboz veremszintje az aktuális halmozási környezetben.
Hogy a doboz létrehoz-e egymásra helyezési kontextust?
Az értékeknek a következő jelentése van:

Ez az egész a létrehozott doboz veremszintje az aktuális halmozási környezetben. A doboz új halmozási környezetet is létrehoz.
auto
A generált doboz veremszintje az aktuális halmozási környezetben 0. A doboz csak akkor hoz létre új veremkörnyezetet, ha az a gyökérelem.
Most minden információval rendelkezünk, hogy jobban megértsük az egyes eseteket. Ha a szülő elem z-index értéke nem az auto, hanem valami más, akkor az egymásra épülő kontextust hoz létre, így a gyermekelem a z-indexüktől függetlenül be lesz festve (negatív vagy pozitív). A gyermek elem z-indexe egyszerűen megmondja a festés sorrendjét a szülő elem belsejében (ez lefedi a második pontját).
Ha csak a gyermek elemnek van pozitív z-indexe, és semmit sem állítunk a szülő elemre, akkor a festési sorrendet figyelembe véve a gyermeket később (a (9) lépésben), a szülőt (8) a lépésben festjük. Az egyetlen logikus módszer a fenti szülő festésére a z-index növelése, de ezzel az előző esetbe kerülünk, amikor a szülő létrehoz egy egymásra helyezési kontextust, és a gyermek elem hozzá fog tartozni.
Nincs mód arra, hogy a szülő egy gyermek elem felett legyen, amikor pozitív z-indexet állít be a gyermek számára. Nincs is mód arra, hogy a szülő a gyermek fölé kerüljön, ha z-indexet állítunk be az auto-tól (pozitív vagy negatív) eltérő szülő elemhez.
Az egyetlen eset, amikor egy gyermeket a szülője alatt lehet, az, hogy negatív z-indexet állítunk be a gyermek elemre, és a szülőt az z-index: auto értéken tartjuk, így ez nem hoz létre egymásra helyezési kontextust, és a festési sorrendet követve gyermeket fogják először festeni.
A z-index mellett vannak más tulajdonságok is, amelyek egymásra helyezési kontextust hoznak létre. Abban az esetben, ha várható halmozási sorrenddel szembesül, akkor ezeket a tulajdonságokat is figyelembe kell vennie annak megállapításához, hogy létrejött-e egymásra helyezési környezet.
Néhány fontos tény, amelyet a fentiekből következtethetünk:
A halmozási kontextusok más halmozási kontextusokban is megtalálhatók, és együttesen létrehozzák a halmozási kontextusok hierarchiáját.
Minden rakáskörnyezet teljesen független testvéreitől: a verem feldolgozásakor csak leszármazott elemeket veszünk figyelembe.
Minden egymásra helyezési kontextus önálló: miután az elem tartalma egymásra került, az egész elemet figyelembe vesszük a szülő egymásra helyezésének egymásra helyezési sorrendjében. ref
1: van néhány hacky módszer, ha figyelembe vesszük a 3D transzformáció használatát.
Példa egy elemre, amely a szülőeleme alá kerül, még akkor is, ha ennek van megadva a z indexe.
.box {
pozíció: rokon;
z-index: 0;
magasság: 80px;
háttér: kék;
átalakítási stílus: megőrzés-3d; /* Ez fontos */
}
.box> div {
margó: 0 50px;
magasság: 100px;
háttér: piros;
z-index: -1; / * ez nem fog semmit tenni * /
transzformáció: fordítsa le Z (-1px); / * ez varázsolni fog* /
}

 

Egy másik példa, ahol egy elemet két elem közé helyezhetünk egy másik halmozási környezetben:
.box {
pozíció: rokon;
z-index: 0;
magasság: 80px;
háttér: kék;
}
.box> div {
margó: 0 50px;
magasság: 100px;
háttér: piros;
z-index: 5;
transzformáció: fordításZ (2px);
}
.outside {
magasság: 50px;
háttér: zöld;
margó: -10px 40px;
transzformáció: fordításZ (1px);
}
test {
átalakítási stílus: megőrzés-3d;
}

 

 
Van egy őrült rakodási sorrendünk is, mint az alábbiak:
.box {
szélesség: 100px;
magasság: 100px;
pozíció: abszolút;
}
test {
átalakítási stílus: megőrzés-3d;
}
 
 
 
 
Meg kell jegyeznünk, hogy egy ilyen hack használatának lehet némi mellékhatása, mivel a transzformációs stílus, a perspektíva és a transzformáció hatással lesz a pozícióra: abszolút / fix elem. Kapcsolódó: A szülő CSS-szűrője megszakítja a gyermek pozicionálását
10.
|
Jó módszer erre gondolni, hogy minden szülő saját veremkörnyezetét tartalmazza. A testvérelemek megosztják a szülő halmozási sorrendjét, ezért átfedhetik egymást.
A gyermek elem MINDIG kap egy halmozási kontextust a szülője alapján. Ezért szükség van egy negatív z-index értékre, amely a gyermeket a szülő (0) veremkörnyezetének „mögé” taszítja.
Az egyetlen módja annak, hogy eltávolítson egy elemet a szülő környezetéből, a position: fix használata, mivel ez lényegében arra kényszeríti, hogy az ablakot használja a kontextushoz.
1
|
A Mozilla dokumentációja igen
A z-index CSS tulajdonság a pozícionált elem és annak leszármazottai vagy flex elemei z-sorrendjét állítja be.
Íme néhány további logika egy másik StackOverflow cikkből, amely a gyermekekkel és leszármazottakkal kapcsolatos.
2
|
Hogyan érthetem meg ezt a viselkedést logika alapján?
Számomra nehéz logikailag megérteni a problémádat. Egy szülő tartalmazza gyermekeit. Egy tálat eltakarhat egy másik tál. De a levest nem takarhatja be a tálba, hacsak nem teszi ki a levest a tálból.
A z-Index beállítja az átfedő elemek sorrendjét. A szülő nem fedheti át a gyermekét.
ImhO ez teljesen logikus.
|
A válaszod
StackExchange.ifUsing ("editor", function () {
StackExchange.using ("externalEditor", function () {
StackExchange.using ("kivonatok", function () {
StackExchange.snippets.init ();
});
});
}, "kódrészletek");
StackExchange.ready (function () {
var channelOptions = {
címkék: "" .split (""),
id: "1"
};
initTagRenderer ("". split (""), "" .split (""), channelOptions);
StackExchange.using ("externalEditor", function () {
// A szerkesztőt töredékek után kell indítania, ha a kivonatok engedélyezve vannak
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using ("kivonatok", function () {
createEditor ();
});
}
más {
createEditor ();
}
});
function createEditor () {
StackExchange.prepareEditor ({
useStacksEditor: hamis,
heartbeatType: 'válasz',
autoActivateHeartbeat: hamis,
convertImagesToLinks: true,
noModals: igaz,
showLowRepImageUploadWarning: igaz,
reputációToPostImages: 10,
bindNavPrevention: igaz,
postfix: "",
imageUploader: {
brandingHtml: "Powered by \ u003ca href = \" https: //imgur.com/ \ "\ u003e \ u003csvg class = \" svg-icon \ "width = \" 50 \ "height = \" 18 \ "viewBox = \ "0 0 50 18 \" fill = \ "none \" xmlns = \ "http: //www.w3.org/2000/svg \" \ u003e \ u003cpath d = \ "M46.1709 9.17788C46.1709 8.26454 46.2665 7.94324 47.1084 7.58816C47.4091 7.46349 47.7169 7.36433 48.0099 7.26993C48.9099 6.97997 49.672 6.73443 49.672 5.93063C49.672 5.22043 48.9832 4.61182 48.1414 4.61182C47.4335 4.61182 46.7256 4.7506 4.916 43.1481 6.59048V11.9512C43.1481 13.2535 43.6264 13.8962 44.6595 13.8962C45.6924 13.8962 46.1709 13.2535 46.1709 11.9512V9.17788Z \ "/ \ u003e \ u003cpath d = \" M32.492 144.04144 144 144 144 144 144 144 0 144 0 144 0 144 144 144 144 0 144 144 144 144 144 144 141 141 141 141 141 141 141 141 141 141 141 141 141 141 141 141 141 141 141 141 141 141 141 141 141 141 141 141 141 214 144 144 144 144 144 144 141 141 211 együtthosás 41.5985 12.6954 41.5985 10.1419V6.59049C41.5985 5.28821 41.1394 4.66232 40.1061 4.66232C39.0732 4.66232 38.5948 5.28821 38.5948 6.59049V9.60062C38.5948 10.8521 38.2696 11.5455 37.0451 11.5455C35 521 35.4954 9.60062V6.59049C35.4954 5.28821 35.0173 4.66232 34.0034 4.66232C32.9703 4.66232 32.492 5.28821 32.492 6.59049V10.1419Z \ "/ \ u003e \ u003cpath fill-rule = \" evenodd \ "clip-rule = \" evenodd \ "clip-rule = = \ "M25.6622 17.6335C27.8049 17.6335 29.3739 16.9402 30.2537 15.6379C30.8468 14.7755 30.9615 13.5579 30.9615 11.9512V6.59049C30.9615 5.28821 30.4833 4.66231 29.4502 4.66231C28.9950 4,509 265 4 264 4 950 4 262 4 5 9 4 5 9 5 5 9 5 5 .1369 4.56087 21.0134 6.57349 21.0134 9.27932C21.0134 11.9852 23.003 13.913 25.3754 13.913C26.5612 13.913 27.4607 13.4902 28.1109 12.6616C28.1109 12.7229 28.1161 12.779928,121 12.8346C28.1256 12,8854 28,1301 12,9342 28,1301 12.983C28.1301 14,4373 27,2502 15,2321 25,777 15.2321C24.8349 15,2321 24,1352 14,9821 23,5661 14.7787C23.176 14,6393 22,8472 14,5218 22,5437 14.5218C21.7977 14,5218 21,2429 15,0123 21,2429 15.6887C21.2429 16,7375 22,9072 17,6335 25,6622 17,6335 ZM24.1317 9.27932C24.1317 7.94324 24.9928 7.09766 26.1024 7.09766C27.2119 7.09766 28.0918 7.94324 28.0918 9.27932C28.0918 10.6321 27.2311 11.5116 26.1024 11.5116C24.9737 11.5116 24.1317 \ 9.1 \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ 8045 11.9512C16.8045 13.2535 17.2637 13.8962 18.2965 13.8962C19.3298 13.8962 19.8079 13.2535 19.8079 11.9512V8.12928C19.8079 5.82936 18.4879 4.62866 16.4027 4.62866C15.1594 4.62866 14.279 4.98375 5.0365 7.9466 5.5079C7.58314 4.9328 7.10506 4.66232 6.51203 4.66232C5.47873 4.66232 5.00066 5.28821 5.00066 6.59049V11.9512C5.00066 13.2535 5.47873 13.8962 6.51203 13.8962C7.54479 13,8962 8,0232 13,2535 8,0232 11,9512V8.90741C8,0232 7,58817 8,44431 6,91179 9,53458 6,91179C10,5104 6,91179 10,893 7,58817 10,893 8,94108V11,9512C10,893 13,2535 11,3711 13,8962 12,404 13,155 13,13513 13,155 13,13 415 13,13 415 13,13 415 13,13 415 13,13 415 13,13 415 13,13 415 13,13 415 13,13 415 133 415 134 415 134 413 134 413 134 413 134 413 134 413 134 415 1313 415 137 415 131 415 1313 415 1313 415 417 134 415 417 134 415 1313 415 417 134 415 131 415 131 415 131 415 131 415 131 415 1313 415 131 415 1315 131 6.91179C16.4027 6.91179 16.8045 7.58817 16.8045 8.94108V11.9512Z \ "/ \ u003e \ u003cpath d = \" M3.31675 6.59049C3.31675 5.28821 2.83866 4.66232 1.82471 4.66232C0.791758 4.66232 0.3133535 5.2133535 5.235 13,8962 1,82471 13,8962C2,85798 13,8962 3,31675 13,2535 3,31675 11,9512V6.59049Z \ "/ \ u003e \ u003cpath d = \" M1.87209 0,400291C0,843612 0,400291 0 1,1159 0 1,98861C0 2,886946 3,576769 3,57 469 1.98861C3.7234 1.1159 2.90056 0.400291 1.87209 0.400291Z \ "fill = \" # 1BB76E \ "/ \ u003e \ u003c / svg \ u003e \ u003c / a \ u003e",
contentPolicyHtml: "Felhasználói hozzájárulások a \ u003ca href = \" https: //stackoverflow.com/help/licensing \ "\ u003ecc by-sa \ u003c / a \ u003e \ u003ca href = \" https://stackoverflow.com címen engedélyezettek / legal / content-policy \ "\ u003e (tartalmi irányelv) \ u003c / a \ u003e",
allowUrls: igaz
},
onDemand: igaz,
discardSelector: ".discard-answer"
, azonnalShowMarkdownHelp: true, enableTables: true, enableSnippets: true
});
}
});
Köszönjük, hogy közreműködött a Stack Overflow válaszában!
Kérjük, feltétlenül válaszoljon a kérdésre. Adjon meg részleteket és ossza meg kutatását!
De kerüld ...
Kérjen segítséget, pontosítást vagy válaszoljon más válaszokra.
Nyilatkozatok tétele vélemény alapján; támassza alá őket referenciákkal vagy személyes tapasztalatokkal.
Ha többet szeretne megtudni, olvassa el a nagyszerű válaszok megírásával kapcsolatos tippjeinket.
Piszkozat mentve
Piszkozat eldobva
Regisztráljon vagy jelentkezzen be
StackExchange.ready (function () {
StackExchange.helpers.onClickDraftSave ('# login-link');
});
Regisztráljon a Google segítségével
Regisztráljon a Facebook segítségével
Regisztráljon az E-mail és a Jelszó használatával
Beküldés
Hozzászólás vendégként
Név
Email
Kötelező, de soha nem látható
StackExchange.ready (
függvény () {
StackExchange.openid.initPostLogin ('. New-post-login', 'https% 3a% 2f% 2fstackoverflow.com% 2fquestions% 2f54897916% 2fwhy-cant-an-element-with-az-index-value-cover-its- gyermek% 23új-válasz ',' kérdés_oldal ');
}
);
Hozzászólás vendégként
Név
Email
Kötelező, de soha nem látható
Tegye közzé válaszát
Dobd el
A „Válasz elküldése” gombra kattintva elfogadja az Általános Szerződési Feltételeinket, az adatvédelmi irányelveket és a cookie-kat
Nem a keresett válasz? Böngésszen a css css-position z-index címkével ellátott többi kérdésben, vagy tegye fel saját kérdését.